/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'确认订单'" @callback="deleteCartItems"></s-header>
    <div class="addr-info" v-if="address" @click="gotoAddressPage">
    <img class="location-img" src="../images/location.png" @click="gotoSettingsPage"/>
      <div class="receiver-info" >
        <span>{{ address.name }} </span>
        <span>{{ address.address }}</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="addr-info" v-else @click="gotoAddressPage">
      <div class="address">+ 添加收货地址</div>
    </div>
    <div class="goods">
      <div class="goods-item" v-for="(item, index) in cartList" :key="index">
        <img class="goods-img" :src="item.squarePic" alt="">
        <div class="goods-desc">
          <div class="goods-title">
            <span>{{ item.name }}</span>
            <span>x{{ item.quantity }}</span>
          </div>
          <div class="goods-btn">
            <div class="price">¥{{ item.price/100 }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-wrapper">
      <div class="bottom-split"></div>
      <div class="bottom-btns">
        <div class="cost-row" data-id="{{id}}">
          <div class="cost-text">实付款</div>
          <div class="cost">¥{{ totalAmount }}</div>
        </div>
         <van-button @click="handleCreateOrder" class="buy-btn" color="#EF3965" type="primary" block>提交订单</van-button>
      </div>
    </div>

  </div>
</template>

<script>
import { reactive, onMounted, toRefs, computed } from 'vue'
import sHeader from '@/components/MyHeader'
import { getByCartItemIds, getDefaultAddress, getAddressDetail, createOrderFromCart } from '@/service/axios-services'
import { setStorage, getStorage } from '@/common/js/utils'
import { Toast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
export default {
  components: {
    sHeader
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      cartList: [],
      address: {},
      orderNo: '',
      cartItemIds: []
    })

    onMounted(() => {
      init()
    })
    
    const init = async () => {
      Toast.loading({ message: '加载中...', forbidClick: true });
      const { addressId, cartItemIds } = route.query
      const _cartItemIds = cartItemIds ? cartItemIds : getStorage('cartItemIds')
      setStorage('cartItemIds', _cartItemIds)
      const { data: list } = await getByCartItemIds(_cartItemIds)
      const { data: address } = addressId ? await getAddressDetail(addressId) : await getDefaultAddress()
      state.cartList = list
      state.address = address
      Toast.clear()
    }

    const gotoAddressPage = () => {
      router.push({ path: '/address-list', query: { cartItemIds: JSON.stringify(state.cartItemIds), from: 'create-order' }})
    }

    const deleteCartItems = () => {
      setStorage('cartItemIds', '')
    }

    const handleCreateOrder = async () => {
      const params = {
        addressId: state.address.id,
        cartIdList: state.cartList.map(item => item.id)
      }
      const { data } = await createOrderFromCart(params)
      setStorage('cartItemIds', '')
      router.push({ path: '/order-list' })
      state.orderNo = data
    }

    const close = () => {
      router.push({ path: '/order' })
    }

    const totalAmount = computed(() => {
      let sum = 0
      state.cartList.forEach(item => {
        sum += item.quantity * item.price/100
      })
      return sum
    })

    return {
      ...toRefs(state),
      gotoAddressPage,
      deleteCartItems,
      handleCreateOrder,
      close,
      totalAmount
    }
  }
}
</script>

<style>
.page-wrapper {
  font-size: 14px;
  background: #F4F4F4;
}
.location-img {
  width: 15px;
  height: 15px;
}

.addr-info {
  background-color: #fff;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.receiver-info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.addr-text{
  margin-left: 20px;
}
.goods {
  margin-bottom: 120px;
}
.goods-item {
  padding: 10px;
  background: #fff;
  display: flex; 
}
.goods-img {
  width: 100px;
  height: 100px
}
.goods-desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 20px;
} 
.goods-title {
  display: flex;
  justify-content: space-between;
}
.goods-btn {
  display: flex;
  justify-content: space-between;
}
.bottom-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  background-color: white;
}

.bottom-split {
  width: 100%;
  height: 1px;
  background-color: #ebebeb;
  margin-bottom: 10px;
}

.bottom-btns {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cost-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-left: 50px;
  align-items: center;
}

.cost-text {
}

.sum-text {
  margin-left: 40px;
}

.cost {
  margin-left: 20px;
  color: #EF3965;
}

.buy-btn {
  flex: 1;
  color: #fff;
  border-radius: 30px;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin-right: 50px;
}
</style>
